<template>
	<div>
		<div class="outer">
			<a-form :label-col="{span: 2}" :wrapper-col="{span: 14}">
				<a-form-item v-for="(item,index) in formData" :key="index">
					<a-input-group size="large">
						<a-row :gutter="8">
							<a-col :span="6">
								<a-input v-model:value="formData[index].name" placeholder="名称" />
							</a-col>
							<a-col :span="15">
								<a-input v-model:value="formData[index].url" placeholder="url" />
							</a-col>
							<DeleteOutlined class="cursor-p" title="删除" @click="delData(index)" />
						</a-row>

					</a-input-group>
				</a-form-item>
				<a-form-item :wrapper-col="{ span: 14, offset: 0 }">
					<a-button size="small" @click="add">
						<template #icon>
							<PlusOutlined />
						</template>
						添加
					</a-button>
				</a-form-item>
				<a-form-item :wrapper-col="{ span: 14, offset: 0 }">
					<a-button type="primary" @click="onSubmit">保存</a-button>
					<a-popover placement="bottomLeft" class="m-l-20">
						<template #content>
							<img src="/src/assets/images/indexNav.png" alt="" style="width: 600px;" />
						</template>
						<a-button>样式</a-button>
					</a-popover>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>
<script>
	import systemApi from '../../api/system.js'

	export default {
		data() {
			return {
				formData: [{
					name: '',
					url: ''
				}]
			}
		},
		computed: {
			filteredOptions() {

			},
		},
		mounted() {
			this.getSystemConfig()
		},
		methods: {
			add() {
				this.formData.push({
					name: '',
					url: ''
				})
			},
			delData(index) {
				this.formData.splice(index, 1)
			},
			onSubmit() {
				systemApi.systemConfig(this.formData, 'indexNav').then(res => {
					if (res.status == 1) {
						this.$message.success('修改成功')
					}
				})
			},
			getSystemConfig() {
				systemApi.getSystemConfig('indexNav').then(res => {
					if (res.status == 1) {
						this.formData = res.result.indexNav
					}
				});
			},
		}
	}
</script>

<style scoped>

</style>